<template>
  <div class="minesettings">
    <div class="mines_tou">
      <p class="min_p1">
        <img class="img1" src="@/assets/fanhui.png">
        <span class="min_span1">设置</span>
      </p>
    </div>
    <div class="mines_zh" @click="props.data(1)">
      <p class="min_p1">
        <span class="min_span2">账号资料</span>
        <img class="img2" src="@/assets/meinv.jpg">
        <img class="img3" src="@/assets/rigth.png">
      </p>
    </div>
    <div class="mines_tou" @click="props.data(2)">
      <p class="min_p1">
        <span class="min_span2">账号与安全</span>
        <img class="img4" src="@/assets/rigth.png">
      </p>
    </div>
    <div class="mines_xiao" @click="props.data(3)">
      <p class="min_p1">
        <span class="min_span2">消息通知设置</span>
        <img class="img5" src="@/assets/rigth.png">
      </p>
    </div>
    <div class="mines_zh" @click="sz=0">
      <p class="min_p1">
        <span class="min_span2">清除缓存</span>
        <span class="mines_tou_span1">{{sz}}M</span>
        <img class="img6" src="@/assets/rigth.png">
      </p>
    </div>
    <div class="mines_xiao">
      <p class="min_p1">
        <span class="min_span2">给我们评分</span>
        <img class="img7" src="@/assets/rigth.png">
      </p>
    </div>
    <div class="mines_tou">
      <p class="min_p1">
        <span class="min_span2">关于我们</span>
        <img class="img8" src="@/assets/rigth.png">
      </p>
    </div>
    <button class="but1">退出登录</button>
</div>

</template>

<script lang="ts" setup>
import { ref } from "@vue/reactivity";
const sz=ref(9.9)
// const emit = defineEmits(['dj'])
const props=defineProps(["data"])
// function dj(e:any){
//   emit("dj",e)
// }
</script>

<style scoped>
  .but1{width: 390px;height: 42px;background-color: #ffff;border: 0;margin-top: 10px;}
  .but1:hover{cursor: pointer;}
.minesettings{width: 390px;min-height: 800px;background-color: #f2f2f2;}
.minesettings div:hover{cursor: pointer;}
.mines_tou{width: 390px;height: 55px;line-height: 55px;border-bottom: 2px solid #f2f2f2;background-color: #ffff;}
.mines_zh{width: 390px;height: 55px;line-height: 55px;border-bottom: 2px solid #f2f2f2;background-color: #ffff;}
.mines_xiao{margin-top: 10px;width: 390px;height: 55px;line-height: 55px;border-bottom: 2px solid #f2f2f2;background-color: #ffff;}
.min_p1{width: 100%;height: 21px;}
.img1{width: 9px;height: 14px;vertical-align: middle;margin-left: 20px;}
.min_span1{width: 64px;height: 100%;vertical-align: middle;margin-left: 136px;}
.mines_tou_span1{width: 20px;height: 21px;vertical-align: middle;margin-left: 136px;color: #9999b2;margin-left: 237px;}
.min_span2{width: 64px;height: 21px;vertical-align: middle;margin-left: 20px;}
.img2{width: 40px;height: 40px; margin-left: 230px;}
.img3{width: 8px;height: 12px;margin-left: 10px;vertical-align: middle;}
.img4{width: 8px;height: 12px;margin-left: 262px;vertical-align: middle;}
.img5{width: 8px;height: 12px;margin-left: 245px;vertical-align: middle;}
.img6{width: 8px;height: 12px;margin-left: 5px;vertical-align: middle;}
.img7{width: 8px;height: 12px;margin-left: 256px;vertical-align: middle;}
.img8{width: 8px;height: 12px;margin-left: 273px;vertical-align: middle;}
</style>